<template>
  <view>
    <!-- 头部 -->
    <view class="headerBgc">
      <image src="https://qn.boruichengyi.com/static/index/images/indebg.png" mode="" style="width: 100%"></image>
      <view class="navtitle">首页</view>
    </view>
    <swiper class="logo" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
      <swiper-item v-for="item in swiperList" :key="item.id">
        <image :src="item.image" mode="aspectFill" style="width: 100%; height: 100%" @click="gominiprogrim(item)"></image>
      </swiper-item>
    </swiper>

    <!-- 周板块 -->
    <view class="week">
      <text class="weekactive">【本周活动】</text>
      <view>
        <view class="weekday">
          <view class="weeklist" v-for="(item, index) in week" :key="index" @click="chooseDate(index)" :class="{ weekdayStyle: index == currentChoose }">
            <view>{{ item.day }}</view>
            <view>{{ item.date }}</view>
          </view>
        </view>
        <view class="actveplace">
          <view class="avtibefooter">
            <view class="activetype" @click="$refs.popup.open()">
              <view>
                <image class="placeicon" src="https://qn.boruichengyi.com/static/index/icon/actSpace.png" mode=""></image>
                {{ acttypename || '活动类型' }}
              </view>
              <text class="sanjiao"></text>
            </view>
            <view class="activetype" @click="$refs.areaRef.open()">
              <view>
                <image class="placeicon" src="https://qn.boruichengyi.com/static/index/icon/acttype.png" mode=""></image>
                {{ area == '' ? '不限' : area || '活动地点' }}
              </view>
              <text class="sanjiao"></text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 活动板块 -->
    <view class="activelist" v-for="(item, index) in list" :key="index" @click="godetail(item.id)">
      <view class="left">
        <image :src="item.cover_image" mode="aspectFill" />
        <text :class="{ baoming: true, fill: item.status == 1 }">{{ item.status_texts }}</text>
      </view>
      <view class="right">
        <view class="title overline">{{ item.title }}</view>
        <view class="time">
          <image src="https://qn.boruichengyi.com/static/index/images/time.png" mode="" style="width: 32rpx; height: 32rpx; vertical-align: bottom"></image>
          {{ item.start_time_text + '-' + item.end_time_text }}
        </view>
        <view class="time">
          <image src="https://qn.boruichengyi.com/static/index/images/position.png" mode="" style="width: 32rpx; height: 32rpx; vertical-align: bottom"></image>
          {{ item.address }}
        </view>
        <view style="display: flex; justify-content: space-between">
          <view style="font-size: 24rpx">
            <view class="pusher">发起人：{{ item.nickname }}</view>
            <view class="peoplenum">报名人数：{{ item.activity_user_num + '/' + item.max_num }}</view>
          </view>
          <view>
            <button class="btn" v-if="item.status != 1">报名</button>
          </view>
        </view>
      </view>
    </view>
    <!-- 活动类型弹框 -->
    <uni-popup ref="popup" type="bottom" backgroundColor="#fff">
      <view class="acttype">
        <view>
          <view class="acttypetitle">
            活动类型
            <uni-icons type="closeempty" size="20" style="margin-left: 220rpx" @click="$refs.popup.close()"></uni-icons>
          </view>
        </view>
        <!-- picker -->
        <picker-view indicator-style="height: 50px;" :value="0" @change="acttypeChange" style="height: 300rpx; margin: 50rpx 0">
          <picker-view-column>
            <view style="text-align: center; line-height: 100rpx" v-for="(item, index) in acttype" :key="index">{{ item.name }}</view>
          </picker-view-column>
        </picker-view>
        <button class="btngender" @click="fnokact">确定</button>
      </view>
    </uni-popup>
    <!-- 选择地区 -->
    <uni-popup ref="areaRef" type="bottom">
      <view class="genderbox">
        <view class="genderboxtitle">
          <view style="font-size: 32rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; margin: 40rpx 0 0 312rpx">选择地区</view>
          <uni-icons type="closeempty" size="20" style="margin: 44rpx 0 0 224rpx" @click="$refs.areaRef.close()"></uni-icons>
        </view>
        <picker-view indicator-style="height: 50px;" :value="place" @change="areachange" style="height: 300rpx">
          <picker-view-column>
            <view style="line-height: 100rpx; text-align: center" v-for="(item, index) in cuurentarea" :key="index">{{ item }}</view>
          </picker-view-column>
        </picker-view>
        <button class="btngender" @click="fnokarea">确定</button>
      </view>
    </uni-popup>
    <kefu></kefu>
  </view>
</template>

<script>
import { timeChange } from '../../utils/tools.js';
export default {
  data() {
    return {
      currentChoose: 0,
      swiperList: [],
      week: [],
      list: [],
      acttype: [],
      place: [0],
      cuurentarea: [
        '',
        '不限',
        '东城区',
        '西城区',
        '崇文区',
        '宣武区',
        '朝阳区',
        '丰台区',
        '石景山区',
        '海淀区',
        '门头沟区',
        '房山区',
        '通州区',
        '顺义区',
        '昌平区',
        '大兴区',
        '平谷区',
        '怀柔区',
        '密云县',
        '延庆县'
      ],
      actypeid: '',
      acttypename: '',
      times: '',
      area: '',
      currenttime: ''
    };
  },
  onLoad() {
    // 获取轮播图
    this.getswiper();
    // 获取活动列表
    this.getactlist();
    this.getactyype();
  },
  onShow() {
    this.chooseDate(this.currentChoose);
  },
  // 切换星期
  mounted() {
    let week = [];
    let time = 24 * 60 * 60 * 1000;
    let day = new Date();

    for (let i = 1; i < 7; i++) {
      // let nowStr = `${day.getMonth() + 1}/${day.getDate()} -- ${day.getDay()}`;
      let obj = {
        date: `${day.getMonth() + 1}/${day.getDate()}`,
        day: ` ${day.getDay()}`
      };
      week.push(obj);
      day = new Date(day.getTime() + time);
    }
    // console.log(week);
    week.forEach((item) => {
      if (item.day == new Date().getDay()) {
        item.day = '今天';
      } else if (item.day == new Date().getDay() + 1) {
        item.day = '明天';
      } else if (item.day == 0) {
        item.day = '周日';
      } else if (item.day == 1) {
        item.day = '周一';
      } else if (item.day == 2) {
        item.day = '周二';
      } else if (item.day == 3) {
        item.day = '周三';
      } else if (item.day == 4) {
        item.day = '周四 ';
      } else if (item.day == 5) {
        item.day = '周五';
      } else if (item.day == 6) {
        item.day = '周六';
      }
    });
    console.log(week);
    this.week = week;
  },

  methods: {
    // 市区变化
    areachange(e) {
      // console.log('选择市区----', this.cuurentarea[e.detail.value[0]]);
      this.area = this.cuurentarea[e.detail.value[0]] == '不限' ? '' : this.cuurentarea[e.detail.value[0]];
      console.log('选择市区----', this.area);
    },
    // 市区变化确认
    async fnokarea() {
      if (this.currenttime == '') {
        this.currenttime = new Date().getTime();
      } else {
        this.currenttime = this.currenttime;
      }

      this.getactlist(new Date(this.currenttime).getTime() / 1000, this.area, this.actypeid);
      this.$refs.areaRef.close();
    },
    // 选择活动类型改变
    acttypeChange(value) {
      // 显示活动类型
      this.showact = this.acttype.filter((item) => {
        return item.id == this.acttype[value.detail.value].id;
      })[0].name;
      this.actypeid = this.acttype[value.detail.value].id;
      this.acttypename = this.acttype[value.detail.value].name;
      this.actypeid = this.actypeid == 7 ? '' : this.actypeid;
      console.log(this.actypeid);
    },
    // 确认活动
    fnokact() {
      // this.actypeid = this.actypeid == 7 ? '' : this.actypeid;

      if (this.currenttime == '') {
        this.currenttime = new Date().getTime();
      } else {
        this.currenttime = this.currenttime;
      }

      this.getactlist(new Date(this.currenttime).getTime() / 1000, this.area, this.actypeid);
      this.$refs.popup.close();
    },
    // 获取活动类型
    async getactyype() {
      const res = await uni.$http.post('index/getActivityType', {
        token: JSON.parse(uni.getStorageSync('userinfo') || '{}').token
      });

      this.acttype = res.data.data;
    },
    // 点击时间的时候获取列表
    chooseDate(index) {
      this.area = '';
      this.actypeid = '';
      this.acttypename = '';
      this.currentChoose = index;
      console.log(this.week[index].date);
      const year = new Date().getFullYear();
      const time = year + '/' + this.week[index].date;
      this.currenttime = time;
      this.getactlist(new Date(time).getTime() / 1000);
    },
    // 获取轮播图
    async getswiper() {
      const res = await uni.$http.post('index/getBanner', {
        token: JSON.parse(uni.getStorageSync('userinfo') || '{}').token
      });
      this.swiperList = res.data.data;
    },
    // 点击轮播图跳转到小程序
    gominiprogrim(item) {
      if (item.type == 0) {
        uni.navigateTo({
          url: '/pages/swiperdetail/swiperdetail?text=' + item.content
        });
      } else if (item.type == 1) {
        uni.navigateTo({
          url: '/pages/webview/webview?url=' + item.path
        });
      } else if (item.type == 2) {
        uni.navigateToMiniProgram({
          appId: item.path
        });
      }
    },
    // 获取活动列表
    async getactlist(time = parseInt(new Date().getTime() / 1000), area = '', activity_type_id = '') {
      const res = await uni.$http.post('index/getArtivityList', {
        page: 1,
        size: 50,
        area: area,
        activity_type_id: activity_type_id,
        times: String(time),
        token: JSON.parse(uni.getStorageSync('userinfo') || '{}').token
      });

      this.list = res.data.data;
      this.list.forEach((item) => {
        // console.log(item.end_time_text.split('-')[1] + '-' + item.end_time_text.split('-')[2].split(':')[0] + ':' + '01-15 01:00:00'.split(':')[1]);
        item.end_time_text = item.end_time_text.split('-')[1] + '-' + item.end_time_text.split('-')[2].split(':')[0] + ':' + '01-15 01:00:00'.split(':')[1];
        item.start_time_text = item.start_time_text.split('-')[1] + '-' + item.start_time_text.split('-')[2].split(':')[0] + ':' + '01-15 01:00:00'.split(':')[1];
        item.endTime = timeChange(item.end_time);
      });
      console.log(this.list);
    },
    // 跳转到详情页
    godetail(index) {
      uni.navigateTo({
        url: '/sub_active/detail/detail?id=' + index
      });
    }
  }
};
</script>

<style lang="less" scoped>
/* 超出文本省略 */
.overline {
  height: 65px;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.baoming {
  position: absolute;
  color: #fff;
  font-size: 20rpx;
  top: 0;
  left: 0;
  width: 90rpx;
  height: 40rpx;
  border-radius: 30rpx 0 30rpx 0;
  text-align: center;
  line-height: 40rpx;
  background-color: black;
  opacity: 0.3;
}
.fill {
  background-color: red !important;
  opacity: 1 !important;
}
.pusher {
  margin-bottom: 20rpx;
  width: 280rpx;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  white-space: nowrap;
}
.time {
  font-size: 26rpx;
  margin-bottom: 10rpx;
}
.title {
  width: 392rpx;
  height: 80rpx;
  font-weight: 700;
  font-size: 28rpx;
  margin-bottom: 10rpx;
}
.btn {
  width: 140rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 28rpx;
  background: #0398ff;
  border-radius: 100rpx 100rpx 100rpx 100rpx;
  margin-top: 20rpx;
  color: #fff;
}
.left {
  position: relative;
  width: 220rpx;
  height: 300rpx;
  margin-right: 20rpx;
}
.left image {
  width: 220rpx;
  height: 300rpx;
}
.activelist {
  display: flex;
  /*  width: 702rpx; */
  /* height: 340rpx; */
  padding: 20rpx;
  margin: 20rpx 24rpx 0rpx 24rpx;
  background-color: #e8f6ff;
}
.headerBgc {
  width: 100%;
}

.navtitle {
  position: absolute;
  top: 57rpx;
  left: 340rpx;
}
.logo {
  position: absolute;
  margin-bottom: 22rpx;
  width: 702rpx;
  height: 304rpx;
  top: 200rpx;
  margin: 0 24rpx;
  z-index: 99;
}
.week {
  width: 702rpx;
  height: 300rpx;
  background-color: rgba(6, 151, 255, 0.1);
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  margin: 24rpx;
  margin-top: 50rpx;
}

.weekday {
  display: flex;
  font-size: 24rpx;
}
.weekdayStyle {
  background-color: #0bafff;
  border-radius: 10%;
  color: #fff !important;
}
.weekactive {
  display: block;

  font-size: 60rpx;
  font-weight: 600;
  margin: 20rpx 0 20rpx 0;
  color: #0697ff;
}
.weeklist {
  text-align: center;
  width: 92rpx;
  height: 80rpx;
  margin: 9rpx 15rpx 0rpx 9rpx;
  color: #006fff;
}
.actveplace {
  display: flex;
  margin-top: 20rpx;
}
.placeicon {
  width: 34rpx;
  height: 34rpx;
  margin-right: 10rpx;
}
.sanjiao {
  width: 0;
  height: 0;
  border-top: 12rpx solid black;
  border-right: 12rpx solid transparent;
  border-left: 12rpx solid transparent;
}
.activetype {
  display: flex;
  border: 1px dotted #ccc;
  font-size: 28rpx;
  width: 352rpx;
  height: 90rpx;
  justify-content: space-around;
  align-items: center;
}
.avtibefooter {
  display: flex;
  justify-content: space-evenly;
  width: 704rpx;
  height: 90rpx;
  text-align: center;
}
// 活动类型弹框
.acttype {
  width: 750rpx;
  height: 594rpx;
  .acttypetitle {
    margin-top: 40rpx;
    font-style: 32rpx;
    font-weight: bold;
    padding-left: 330rpx;
    color: #333333;
  }

  .btngender {
    width: 670rpx;
    height: 90rpx;
    color: #fff;
    background: linear-gradient(180deg, #0398ff 0%, #21e5ff 100%);
    border-radius: 100rpx 100rpx 100rpx 100rpx;
  }
}
.genderbox {
  width: 750rpx;
  height: 524rpx;
  background: #ffffff;
  border-radius: 30rpx 30rpx 0rpx 0rpx;
  .genderboxtitle {
    display: flex;
  }
  .btngender {
    width: 670rpx;
    height: 90rpx;
    color: #fff;
    background: linear-gradient(180deg, #0398ff 0%, #21e5ff 100%);
    border-radius: 100rpx 100rpx 100rpx 100rpx;
  }
}
</style>
